<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <title>用户管理</title>
  </head>
  <body>
    <div class="container-fluid">
      <!-- 路径导航 -->
	  <ol class="breadcrumb">
	    <li><a href="${ctx}/workbench">主页</a></li>
	    <li class="active">用户管理</li>
	  </ol>
	  <!-- /路径导航 -->
	  
	  <!-- 警告框 -->
	  <c:if test="${not empty message}">
	    <div class="alert alert-${message.state} alert-dismissible" role="alert">
	      <button type="button" class="close" data-dismiss="alert">
	        <span aria-hidden="true">&times;</span>
	        <span class="sr-only">关闭</span>
	      </button>
	      ${message.message}
	    </div>
	  </c:if>
	  <!-- ／警告框 -->
	  
	  <div class="panel panel-default">
	    <div class="panel-heading">
	      <h3 class="panel-title">用户管理</h3>
	    </div>
	    <div class="panel-body">
	      <form class="form-inline" action="#" role="form">
	        <div class="form-group">
	          <label for="user-name">用户名</label>
	          <input type="text" class="form-control" id="user-name" name="search_LIKE_name" value="${param.search_LIKE_name }" placeholder="用户名" >
	        </div>
	        <button type="submit" class="btn btn-default" id="search-id">查询</button>
	        <tags:sort/>
	      </form>
	      <hr>
	      <!-- 响应式表格:将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格.-->
	      <!-- 其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失 -->
	      <div class="table-responsive">
	        <table class="table table-hover">
	          <thead>
	            <tr>
	              <th>登录名</th>
	              <th>姓名</th>
	              <th>邮箱</th>
	              <th>注册时间</th>
	              <th>管理</th>
	            </tr>
	          </thead>
	          <tbody>
	            <c:forEach items="${users.content}" var="user">
	            <tr>
	              <td>${user.loginName}</td>
	              <td>${user.name}</td>
	              <td>${user.email}</td>
	              <td><fmt:formatDate value="${user.registerDate}" pattern="yyyy年MM月dd日" /></td>
	              <td>
	                <a class="text-info" href="${ctx}/user/update/${user.id}">修改</a> / 
	                <a class="text-danger" href="${ctx}/user/delete/${user.id}" onclick="return confirm('是否删除该用户？')" >删除</a>
	              </td>
	            </tr>
	            </c:forEach>
	          </tbody>
	        </table>
	      </div>
	      <div class="pull-right">
	        <tags:pagination page="${users}" paginationSize="5"/>
	      </div>
	      <div class="pull-left">
	        <a class="btn btn-default" href="${ctx}/user/create">添加用户</a>
	      </div>
	    </div>
	  </div>
	  
	</div>
	
    <!-- 以下开始 加载JS动态效果 -->
    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="${ctx}/static/jquery/jquery-1.11.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="${ctx}/static/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
  </body>
</html>